<template>
  <div :class="[prefixCls,prefixCls+`-${theme}`]" :style="menuStyle">
    <ul :class="prefixCls+'-ul'" :style="ulStyle">
      <li
        v-for="(item,index) in menu"
        :key="index"
        :class="[prefixCls+'-item',(index==currentIndex||hoverIndex==index)?(activeShowBorder?getMenuItemActive:''):'']"
        @click="handleMenuClick(index)"
        @mouseenter.stop="handleMouseEnter(index)"
        @mouseleave.stop="handleMouseLeave(index)"
        :style="[itemStyle,{color:index==currentIndex?activeColor:(hoverIndex==index?hoverColor||activeColor:textColor),
        background:currentIndex==index?(activeBackgroundColor!=''?activeBackgroundColor:
        theme=='dark'?`#363e4f`:''):(hoverIndex==index?hoverBackgroundColor||activeBackgroundColor:''),
        borderColor:currentIndex==index?activeColor:(hoverIndex==index?hoverColor||activeColor:'')}]"
      >
        <div :class="prefixCls+'-item-container'" :style="containerStyle">
            <i :class="item.icon" :style="iconStyle" v-if="item.icon"></i>
            <span>{{item.content||item}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { oneOf } from "utils/index.js";
const prefixCls = "vbestui-menu";
export default {
  name: "BMenu",
  props: {
    activeIndex:{
      type:Number,
      default:0
    },
    menu: {
      type: Array,
      default: [],
    },
    theme: {
      validator(value) {
        return oneOf(value, ["dark", "light"]);
      },
      default: "light",
    },
    vertical: {
      type: Boolean,
      default: false,
    },
    itemWidth: {
      type: String,
      default: "140px",
    },
    itemHeight: {
      type: String,
      default: "",
    },
    backgroundColor: {
      type: String,
      default: "",
    },
    activeBackgroundColor: {
      type: String,
      default: "",
    },
    textColor: {
      type: String,
      default: "",
    },
    /**活跃颜色 */
    activeColor: {
      type: String,
      default: "var(--primary)",
    },
    hoverColor: {
      type: String,
      default: "",
    },
    hoverBackgroundColor: {
      type: String,
      default: "",
    },
    activeShowBorder: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      prefixCls: prefixCls,
      currentIndex: 0,//当前活跃下标
      hoverIndex: 0, //鼠标移动时活跃
    };
  },
  computed: {
    menuStyle() {
      return {
        width: this.vertical ? this.itemWidth : "",
        height: this.vertical ? "100%" : "",
        backgroundColor: this.backgroundColor,
      };
    },
    ulStyle() {
      return { display: this.vertical ? "block" : "flex" };
    },
    itemStyle() {
      return {
        textAlign: this.vertical ? "none" : "center",
        paddingLeft: this.vertical ? "20px" : "none",
      };
    },
    containerStyle() {
      return {
        width: this.itemWidth,
        height: this.itemHeight,
        // lineHeight: this.vertical ? this.itemHeight : "",
        lineHeight: this.itemHeight,
      };
    },
    iconStyle() {
      return {
        marginRight: "8px",
      };
    },
    /**导航栏活跃时-边框类 */
    getMenuItemActive() {
      return this.vertical
        ? `${this.prefixCls}-item-active-vertical`
        : `${this.prefixCls}-item-active`;
    },
    /**二级菜单活跃时 */
    getChildItemActive() {
      return `${this.prefixCls}-item-active-vertical`;
    },
    /**显示子菜单 */
    isChildsMenu() {
      return this.showChildsMenu || this.hovershowChildsMenu;
    },
  },
  methods: {
    handleMenuClick(index) {
      this.currentIndex = index;
      //点击一级菜单显示二级菜单
      if (this.menu[index] instanceof Object && this.menu[index].link) {
        this.$router.push(`${this.menu[index].link}`);
      }
      this.$emit('update:activeIndex',this.currentIndex);
      this.$emit("click", this.currentIndex);
    },
    handleMouseEnter(index) {
      this.hoverIndex = index; //鼠标经过活跃
      this.hovershowChildsMenu = true; //鼠标移入显示子菜单
    },
    handleMouseLeave(index) {
      this.hoverIndex = this.currentIndex;
      this.hovershowChildsMenu = false; //鼠标移入隐藏子菜单
    },
  },
  watch:{
    /**监听初始活跃menu */
    activeIndex:{
      handler(){
        this.currentIndex=this.activeIndex;
        this.hoverIndex=this.activeIndex;
      },
      immediate:true
    }
  }
};
</script>